<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" th:src="@{/js/vue.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/elementui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.bundle.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/css/elementui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">

</head>
<style>
    #serverTable th, td {
        width: 350px;
        height: 55px;
        text-align: center;
    }

    #server {
        margin-top: 5%;
    }
</style>
<body>
<div id="server">
    <h3 align="center">服务器列表</h3>
    <div style="display: block; width: auto;padding-left: 5%;">
        <el-button type="warning" @click="dialogFormVisible = true">新增服务器</el-button>
        <table align="center" border="1" cellpadding="0" cellspacing="0" id="serverTable">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>ip</th>
                <th width="500">操作</th>
            </tr>
            <tr v-for="(item,index) in serverList" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ip}}</td>
                <td>
                    <button class="btn btn-success" @click="checkApp(item)">查看服务器应用</button>
                    <button class="btn btn-info" @click="updateServer(item)">修改</button>
                </td>
            </tr>
        </table>
    </div>
    <el-dialog title="添加服务器" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="服务器名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器ip" :label-width="formLabelWidth">
                <el-input v-model="form.ip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器端口" :label-width="formLabelWidth">
                <el-input v-model="form.port" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器用户名" :label-width="formLabelWidth">
                <el-input v-model="form.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertServer">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var server = new Vue({
        el: "#server",
        data: {
            serverList: [],
            dialogFormVisible: false,
            form: {
                name: '',
                ip: '',
                port: '',
                account: '',
                password: ''
            },
            initForms: {},
            formLabelWidth: '120px'
        },
        methods: {
            getList() {
                $.ajax({
                    url: "/server",
                    type: "GET",
                    dataType: "json",
                    success: function (msg) {
                        server.serverList = msg.data;
                        console.log(msg);
                    }
                });
            },
            checkApp(item) {
                location.href = "/page/app?id=" + item.id;
            },
            updateServer(item) {

            },
            deleteServer(item) {

            },
            initForm() {
                Object.assign(this.initForms,this.form);
            },
            insertServer() {
                $.ajax({
                    url: "/server",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.form),
                    success: function (msg) {
                        if (msg.code == "200") {
                            server.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            server.dialogFormVisible = false;
                            server.getList();
                            Object.assign(server.form, server.initForms)
                        } else {
                            server.$message({
                                message: msg.msg,
                                type: 'error'
                            });
                        }
                    }
                });
            }
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.initForm();
            this.getList();
        }
    });
</script>
</body>
</html>